<template>
<div class="wrap">
<xcl-header :show="loading.show" :call-back="()=>{}" :page-title="pageTitle" :header-right="headerRight"></xcl-header>
<!--产品列表-->
<div class="content" id="content2" transition="fade" v-show="screen">
	<xcl-tab :tab-titles="tabTitles" :click-fn="tabClickFn"></xcl-tab>
	<div v-if="topics.length === 0  && loading.show === false" >
      <div class="no-data">暂无数据</div>
    </div>
	<div class="list-block" style="margin:0" v-else>
		<ul>
			<li v-for="i in topics" class="item-content item-link">
                <div class="item-inner" v-link="{name:'Newsview',params:{id:i.id}}">
                    <div class="item-title">{{i.t}}</div>
                    <div class="item-after"></div>
                </div>
			</li>
		</ul>
		<div class="no-data-load" v-if="nodata">没有更多的数据了...</div>
	</div>
</div>
<xcl-loading :show="loading.show" :show-txt="loading.showTxt"></xcl-loading> 
</div>
</template>
<script>
  import xclHeader from '../components/header.vue'
  import xclLoading from '../components/loading.vue'
  import xclTab from '../components/tab.vue'
  let consult_proxy =  require("../proxy/consult_proxy");
  let consult = new consult_proxy();
  export default {
        data (){
            return {
                scroll:true,
                screen:true,
                pageTitle:'资讯中心',
                headerRight:'',
                tagName:this.$route.params.tn,
                myFollow:[],
                nodata:false,
                login:true,
                topics:[],
                productRunning:{},
                tabTitles:[
                    {title:'私募动态',order:4,active:false},
                    {title:'私募观点',order:2,active:false},
                    {title:'研究报告',order:3,active:false},
                    {title:'投资建议',order:9,active:false},
                ],
                searchKey:{
                    page:1,
                    limit:20,
                    tab:'all',
                    mdrender:true
                },
                 loading:{
                    show:false
                }
            }
        },
        route:{
            deactivate (transition){
                $('#content2').off('scroll');
                transition.next();
            }
        },
        ready (){
           //页面初次加载获取的数据
            this.getTopics();
            if(localStorage.token){
            	this.getMyFollow();
            }
            this.tabTitles.forEach((item)=>{
            	var _this=this;
                item.order===_this.$route.params.tn ? item.active = true : item.active = false;
            });
            $('#content2').on('scroll', () => {
              this.getScrollData();
            });
        },
        methods:{
        	//获取产品列表
            getTopics (){
                var _this=this;
                var Sid=new Array();
                _this.loading.show = true;                 
                consult.getJournalismtList(_this.tagName,_this.searchKey.page,_this.searchKey.limit,function(data){
                	if(data.code==200&&data.results&&data.results.length){
                        _this.scroll = true;
                        _this.topics=_this.topics.concat(data.results);
                	}else{
                		_this.nodata = true;
                	}
                	_this.loading.show = false;  
                })
            },
           
            //滚动加载数据
            getScrollData (){
                if(this.scroll){
                    let $content=$('#content2');
                    if ($content.height() + $content[0].scrollTop >= $content[0].scrollHeight - 10) {
                        this.scroll = false;
                        this.searchKey.page++;
                        this.getTopics();
                    }
                }
            },
           
            //tab
            tabClickFn(order){
            	var _this=this;
                this.tabTitles.forEach((item,index)=>{
                    order===item.order ? item.active = true : item.active = false;
                });
                this.tagName = order;
                this.searchKey.page=1;
            	this.topics=[];
            	this.getTopics();
            },
        },
        components:{
           "xclHeader":xclHeader,
           "xclLoading":xclLoading,
           "xclTab":xclTab
        }
  }
</script>
<style lang="stylus">
.intro p
  text-indent 2em
.card-title{
	padding:0.3rem 0.5rem;
	font-size:0.75rem;
}
.screen-item{
	background:#f2f2f2;
    color: #111;
    text-decoration: none;
    text-align: center;
    display: block;
    border-radius: .25rem;
    line-height: 1.8rem;
    box-sizing: border-box;   
    padding: 0 .5rem;
    margin: 0 0 0.5rem 0;
    height: 1.8rem;
    white-space: nowrap;
    position: relative;
    text-overflow: ellipsis;
    font-size: .7rem;
    font-family: inherit;
    cursor: pointer;
}
.active-item{
	color:#fff;
	background-color:#e76364 !important;
}
.follow{
	color:#F00;
}
.no-data-load
  padding:0.3rem 0 0.5rem
  font-size:0.75rem
  text-align:center  
  color:#ccc  
</style>
